<template>
  <view class="menu">
    <!-- #ifdef MP-WEIXIN -->
    <view
      class="box"
      :animation="animationData"
      @click="toCoupon"
      v-if="userInfo.newMember === 1"
    >
      <image
        :src="'https://mini.jiaw.com/img/5454020211206.jpg'"
        class="coupon-img"
      ></image>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view
      class="menu-item"
      @click="toContent(item.url)"
      v-for="item of menu"
      :key="item.id"
    >
      <image
        v-if="item.name != '智慧停车'"
        class="icon"
        :src="'../../../static/images/' + `${item.url}` + '.png'"
      ></image>
      <text class="title" v-if="item.name != '智慧停车'">{{ item.name }}</text>
      <button
        class="btn"
        v-if="item.name === '智慧停车' && !userInfo.memberName"
        open-type="getUserProfile"
        @click="login"
      >
        <image
          class="park-img"
          :src="'../../../static/images/' + `${item.url}` + '.png'"
        ></image>
        <text class="park-title">{{ item.name }}</text>
      </button>
      <button
        class="btn"
        v-if="
          item.name === '智慧停车' && userInfo.memberName && !userInfo.phone
        "
        @getphonenumber="getUserPhone"
        open-type="getPhoneNumber"
      >
        <image
          class="park-img"
          :src="'../../../static/images/' + `${item.url}` + '.png'"
        ></image>
        <text class="park-title">{{ item.name }}</text>
      </button>
      <button
        @click="toPark"
        class="btn"
        v-if="item.name === '智慧停车' && userInfo.memberName && userInfo.phone"
      >
        <image
          class="park-img"
          :src="'../../../static/images/' + `${item.url}` + '.png'"
        ></image>
        <text class="park-title">{{ item.name }}</text>
      </button>
    </view>
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <view
      class="menu-item"
      @click="toContent(item.url)"
      v-for="item of aliMenu"
      :key="item.id"
    >
      <button class="btn">
        <image
          class="park-img"
          :src="'../../../static/images/' + `${item.url}` + '.png'"
        ></image>
        <text class="park-title">{{ item.name }}</text>
      </button>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { menu, aliMenu } from '@/api/local-data'
import mixins from '@/mixins'

Object.freeze(menu)
export default {
  mixins: [mixins],
  data() {
    return {
      menu,
      aliMenu,
      animationData: {},
      setIntervalBox: ''
    }
  },

  methods: {
    startMove() {
      var animation = uni.createAnimation({
        duration: 2000,
        timingFunction: 'linear'
      })

      //#ifdef MP-WEIXIN

      this.setIntervalBox = setInterval(
        function() {
          animation.translate(Math.random() * 240, Math.random() * 100).step()
          this.animationData = animation.export()
        }.bind(this),
        2000
      )
      //#endif
      //#ifdef MP-ALIPAY
      this.setIntervalBox = setInterval(
        function() {
          animation.translate(Math.random() * 240, Math.random() * 45).step()
          this.animationData = animation.export()
        }.bind(this),
        2000
      )
      //#endif
    },
    stopMove() {
      clearInterval(this.setIntervalBox)
    },
    toCoupon() {
      uni.navigateTo({
        url: `/pages/package/coupon/index`
      })
    },
    toPark() {
      wx.navigateToMiniProgram({
        appId: 'wx6945d1bda68d7993'
      })
    },
    toContent(item) {
      if (item === 'parking-lot') {
        return
      } else if (item === 'design-collection') {
        wx.navigateToMiniProgram({
          appId: 'wxbcd180be5a661387'
        })
      } else if (item === 'swap') {
        wx.scanCode({
          success(res) {
            uni.navigateTo({
              url: '/' + res.path
            })
          }
        })
      } else {
        uni.navigateTo({
          url: `/pages/package/${item}/index`
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.menu {
  display: flex;
  flex-wrap: wrap;
  padding: 24rpx 0 14rpx 0;
  .box {
    width: 150rpx;
    height: 150rpx;
    position: absolute;
    z-index: 9999;
    .coupon-img {
      height: 100%;
      width: 100%;
    }
  }

  .menu-item {
    width: 25%;
    height: 140rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20rpx 0;
    &:last-child {
      .icon {
        padding: 10rpx 0;
        width: 120rpx;
        height: 45rpx;
      }
    }
    .icon {
      width: 60rpx;
      height: 62rpx;
    }
    .title {
      padding-top: 10rpx;
      margin-top: 20rpx;
      font-size: 28rpx;
    }
    .btn {
      display: flex;
      flex-direction: column;
      border-radius: 0;
      line-height: 1;
      background-color: transparent;
      align-items: center;
      height: 100%;
      width: 100%;
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
      &::after {
        border: none;
      }

      .park-img {
        width: 60rpx;
        height: 62rpx;
        margin-top: 4rpx;
      }
      .park-title {
        color: rgb(54, 54, 54);
        padding-top: 10rpx;
        margin-top: 27rpx;
        font-size: 28rpx;
      }
    }
  }
}
</style>
